<template>
  <div class="tabsview">
    <el-tabs v-model="activeName" type="card" class="">
      <el-tab-pane v-for="item, index of tabsList" :key="item.label" :label="item.label" :name="item.name">
        <div class="tabsview-content">
          <ul class="article-list">
            <li v-for="item, index of articleList" :key="item.id" @click="articleListClickEvent(item.id)">
              <div class="article-list-content">
                <div class="left">
                  <div>
                    <a class="list-username">
                      <div>{{ item.username }}</div>
                    </a>
                    <div class="list-date">{{ item.releaseTime }}</div>
                    <div class="tag-list">
                      <a class="tag" v-for="tag of item.tags" :key="tag">{{ tag }}</a>
                    </div>
                  </div>
                  <div class="list-title">
                    {{ item.articleTitle }}
                  </div>
                  <div class="synopsis">
                    {{ item.synopsis }}
                  </div>
                  <div class="list-number-list">
                    <div class="viewsNum">
                      <el-icon>
                        <View />
                      </el-icon>
                      {{ item.viewsNum }}
                    </div>
                    <div class="likeNum">
                      <el-icon>
                        <svg-icon name="dianZan" />
                      </el-icon>
                      {{ item.likeNum }}
                    </div>
                    <div class="commentNum">
                      <el-icon>
                        <ChatRound />
                      </el-icon>
                      {{ item.commentNum }}
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="cover">
                    <el-image style="width: 100px; height: 100px" :src="item.cover" fit="contain" />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import {
  View,
  ChatRound,
} from '@element-plus/icons-vue'

// 路由
const route = useRoute();
const router = useRouter();

// tabs
const activeName = ref('recommend')
const tabsList = reactive([
  {
    label: '推荐',
    name: 'recommend',
  },
  {
    label: '最新',
    name: 'new',
  }
])

// article list
const articleList = reactive([
  {
    id: '1',
    articleTitle: '为什么说 Nest.js 提供了 Express 没有的架构能力？',
    username: '神说要有光',
    userId: '10001',
    synopsis: 'Nest.js 是当前最流行的 Node.js 框架，现在已经 56k star 了',
    releaseTime: '2023-2-9 13:28:46',
    cover: '/images/communication-image/code10.webp',
    tags: ['后端'],
    viewsNum: 12,
    likeNum: 12,
    commentNum: 12,
  },
  {
    id: '2',
    articleTitle: 'vue的几个提效技巧',
    username: '我在纽约写程序',
    userId: '10002',
    synopsis: "1.动态组件 <component :is='组件名'></component> 结合v-for循环使用",
    releaseTime: '2023-2-9 13:28:46',
    cover: '',
    tags: ['前端'],
    viewsNum: 1,
    likeNum: 1,
    commentNum: 1,
  },
  {
    id: '3',
    articleTitle: 'ElasticSearch数据存储与搜索基本原理',
    username: 'chenyuxi',
    userId: '10001',
    synopsis: '为啥想学习es，主要是在工作中会用到，但是因为不了解原理，所以用起来畏手畏脚的，就想了解下es是怎么存储数据，以及es是怎么搜索数据的，我们平时应该如 何使用es，以及使用时候需要注意的方面。 ',
    releaseTime: '2023-2-9 13:28:46',
    cover: '/images/project-image/code2.jpg',
    tags: ['后端'],
    viewsNum: 32,
    likeNum: 32,
    commentNum: 23,
  },
  {
    id: '4',
    articleTitle: '开发中使用iconfont太麻烦了，于是我写了这款vscode插件，支持react和vue。',
    username: '前端小付',
    userId: '10001',
    synopsis: '开发中使用iconfont太麻烦了，于是我写了这款vscode插件，支持react和vue。本文主要写了插件的使用方法、实现思路以及开发插件遇到的难题。',
    releaseTime: '2023-2-9 13:28:46',
    cover: '/images/communication-image/code11.webp',
    tags: ['前端'],
    viewsNum: 24,
    likeNum: 24,
    commentNum: 12,
  },
  {
    id: '5',
    articleTitle: '文章测试标题5',
    username: '文章测试作者',
    userId: '10001',
    synopsis: '文章简介',
    releaseTime: '2023-2-9 13:28:46',
    cover: '/images/project-image/code1.jpg',
    tags: ['前端', '后端'],
    viewsNum: 12,
    likeNum: 12,
    commentNum: 12,
  },

])

// article list 点击事件
const articleListClickEvent = (articleId: string) => {
  console.log('被点击的文章id', articleId)
  router.push({
    name: 'Article',
    params: {id: articleId},
  })
}




</script>

<style lang="less" scoped>
@color: #909090; // 默认字体颜色
@border-color: #dcdfe6; //边框默认颜色
@tab-color-activeHover: #409eff; // tab active/hover颜色

.tabsview {
  background-color: #fff;
  :deep(.el-tabs) {
    .el-tabs__header {
      margin: 0;
    }
  }

  // 文章列表
  .tabsview-content {

    .article-list {
      padding: 0 20px 20px 20px;

      &>li {
        border-bottom: 1px solid @border-color;

        .article-list-content {
          display: grid;
          grid-template-columns: 7fr 1fr;
          height: 140px;
          padding-top: 10px;

          .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            div:nth-child(1) {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              text-align: center;

              .list-username {
                display: flex;
                align-items: center;
                margin-right: 8px;
                max-width: 162px;
                font-size: 13px;
                line-height: 22px;
                color: #4e5969;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
              }

              .list-date {
                position: relative;
                padding: 0 10px;
                line-height: 22px;
                font-size: 13px;
                flex-shrink: 0;
                color: #86909c;
              }

              .list-date::before,
              .list-date::after {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: block;
                width: 1px;
                height: 14px;
                background: #e5e6eb;
                content: " ";
              }

              .list-date::before {
                left: 0;
              }

              .list-date::after {
                right: 0;
              }

              .tag-list {
                padding: 0 10px;
                color: #86909c;

                .tag {
                  position: relative;
                  flex-shrink: 0;
                  font-size: 13px;
                  line-height: 22px;
                  padding: 0 8px;
                  color: #86909c;

                  &:not(:last-child)::after {
                    position: absolute;
                    right: -1px;
                    top: 9px;
                    display: block;
                    content: " ";
                    width: 2px;
                    height: 2px;
                    border-radius: 50%;
                    background: #4e5969;
                  }
                }

              }
            }

            .list-title {
              font-weight: 700;
              font-size: 16px;
              line-height: 24px;
              color: #1d2129;
              margin-bottom: 8px;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .synopsis {
              color: #86909c;
              font-size: 13px;
              line-height: 22px;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .list-number-list {
              display: flex;
              align-items: center;
              padding-bottom: 10px;

              &>div {
                position: relative;
                margin-right: 20px;
                font-size: 13px;
                line-height: 20px;
                color: #4e5969;
                flex-shrink: 0;
              }
            }
          }

          .right {
            .cover {
              flex: 0 0 auto;
              width: 120px;
              height: 80px;
              margin-left: 24px;
              border-radius: 2px;
            }
          }
        }


      }
    }
  }
}
</style>